import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { Space, Table } from 'antd';

function kefu(props: any) {
  //全选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const columns = [
    {
      title: 'ID',
      dataIndex: 'key',
      key: 'key',
      sorter: (a: any, b: any) => a.id - b.id,
    },
    {
      title: '客服编码',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '客服名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '游客头像',
      dataIndex: 'img',
      key: 'img',
      // eslint-disable-next-line jsx-a11y/alt-text
      render: (text: string | undefined) => (
        <img src={text} style={{ width: 50, height: 50 }}></img>
      ),
    },

    {
      title: '在线状态',
      dataIndex: 'city',
      key: 'city',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: '创建时间',
      dataIndex: 'time',
      key: 'time',
    },
    {
      title: 'Action',
      key: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <button>编辑</button>
          <button>删除</button>
        </Space>
      ),
    },
  ];
  const data: any = [
    {
      key: '1',
      name: '客服一',
      age: 'kefu5df785ee07ae1',
      img: 'http://fangadmin.shbwyz.com/static/common/images/kefu.jpg',
      city: '离线',
      time: '2019-12-16 21:26:06',
    },
    {
      key: '2',
      name: '客服二',
      age: 'kefu5df786c6a2277',
      img: 'http://fangadmin.shbwyz.com/static/common/images/kefu.jpg',
      city: '离线',
      time: '2019-12-16 21:29:42',
    },
    {
      key: '3',
      name: 'test',
      age: 'kefu5fdb05129a87d',
      img: 'http://fangadmin.shbwyz.com/static/common/images/kefu.jpg',
      city: '离线',
      time: '2019-12-16 21:26:06',
    },
    {
      key: '4',
      name: '000',
      age: 'kefu63fb3cff45a33',
      img: 'http://fangadmin.shbwyz.com/static/common/images/kefu.jpg',
      city: '离线',
      time: '2023-02-26 19:05:35',
    },
    {
      key: '5',
      name: '客服3',
      age: 'kefu63fb3f2cd8bba',
      img: 'http://fangadmin.shbwyz.com/static/common/images/kefu.jpg',
      city: '离线',
      time: '2023-02-26 19:14:52',
    },
  ];
  return (
    <div>
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 5,
          // total:500,pageSizeOptions:[1,2,3,4,5] 
        }}
      />
    </div>
  );
}

const mapStateToProps = ({ list }: any) => ({
  list,
});

export default connect(mapStateToProps)(kefu);
